<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>21_文本属性-文本对齐-垂直方向-</title>

        <style>
            /* （1）div中包含了span标签  span在垂直方向的对齐方式*/
            div {
                font-size: 100px;
                height: 300px;
                background-color: tomato;
            }

            span {
                font-size: 40px;
                background-color: yellow;
                /* 当前元素span的一半 和  他父元素的基线 + 父元素x高度的一半*/
                /* vertical-align: middle; */

                /* 就是和字体框的顶部对齐 */
                /* vertical-align: top; */

                /* 就是和字体框的低部对齐 */
                /* vertical-align: bottom; */

                /* 默认情况下是span的基线和div的基线对齐 */
                vertical-align: baseline;
            }
        </style>
    </head>
    <body>
        <div>
            atguigux尚硅谷<span>x前端学科</span>
        </div>
    </body>
</html>